<template>
  <div>
    <div class="flex justify-content-between mb10">
      <div class="flex">
        <div>
          <span class="mr5">
             <cc-upload-slot @success="handleUploadSuccess">
               <a-button type="primary"  > <template
              #icon><PlusOutlined/> </template>添加附件</a-button>
             </cc-upload-slot>
          </span>
        </div>
      </div>
    </div>
    <a-table
        :columns="columns"
        rowClassName="items"
        :loading="tableLoading"
        rowKey="id"
        :pagination="false"
        :data-source="tableData"
        size="small"  bordered>
      <template #bodyCell="{ column,text,record,index }">
        <template v-if="column.dataIndex === 'wenJianMing'">
          <div v-if="!record.id || record.edit"><a-input style="text-align: center" v-model:value="record.wenJianMing" placeholder="请填写" maxlength="100"></a-input></div>
          <div v-else>{{record.wenJianMing}}</div>
        </template>
        <template v-if="column.dataIndex === 'operation'">
          <div class="editable-row-operations">
              <span class="mr5">
                <a :href="record.wenJianLuJing" :title="record.wenJianMing" target="_blank" class="mr10"><a-button type="primary" size="small" > <template #icon><down-circle-filled  style="font-size:12px"/></template>下载</a-button></a>
                <a-popconfirm  title="你确定删除吗?" @confirm="handleDeleteItem(index)">
                   <a-button type="primary" size="small" danger> <template #icon><CloseOutlined  style="font-size:12px"/></template>删除</a-button>
                </a-popconfirm>
              </span>
          </div>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script setup>
const cid = ref("")
const cname = ref("")
const addWorkRef = ref(null)
const addLoading = ref(false)
const tableLoading = ref(false)
const total = ref(0)
const tableData = ref([]);
const emits = defineEmits(["success"])
const queryParams = reactive({
  pageNo: 1,
  pageSize: 500,
  chuanYuanId:"",
})
const formState = ref({
  chuanYuanId:"",
  chuanYuanName:"",
  wenJianMing:"",
  wenJianLuJing:"",
})

const columns = [
  {title: '#', width: 80, dataIndex: 'index', align: "center", customRender: ({text, record, index}) => index + 1},
  {title: '文件名称', dataIndex: 'wenJianMing', align: "center"},
  {
    title: '操作',
    dataIndex: 'operation',
    width: 180,
    align: "center"
  },
];

const handleUploadSuccess = async (data)=>{
  formState.value.wenJianMing = data.name
  formState.value.wenJianLuJing = data.url
  await useSaveUpdateChuanYuanKuFuJianApi(formState.value)
  handleLoadData(cid.value,cname.value)
}

/**
 * 查询列表数据
 */
const handleLoadData = async (chuanyuanId,chuanyuanName)=>{
  cid.value = chuanyuanId
  cname.value = chuanyuanName
  queryParams.chuanYuanId  = chuanyuanId
  formState.value.chuanYuanId = chuanyuanId
  formState.value.chuanYuanName = chuanyuanName
  tableLoading.value = true
  const resp = await useLoadChuanYuanKuFuJianApi(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records.map(c=>{
    c.edit = false
    return c
  })
  total.value = resp.data.total
}

// 删除
const handleDelete = async(id) => {
  await useDelChuanYuanKuFuJianApi(id)
  useMessage().success("删除成功!");
  handleLoadData(cid.value, cname.value)
}

const handleDeleteItem = (index) => {
  tableData.value.splice(index,1)
}

const currentItem = ref({})
// 编辑
const handleEdit = (index) => {
  tableData.value[index].edit = true
  if(!tableData.value[index].qianFaRiQi) {
    const currentDate = new Date();
    const formattedTime = currentDate.toISOString().split('T')[0]
    tableData.value[index].qianFaRiQi = formattedTime
  }
  currentItem.value = {...tableData.value[index]}
}
// 编辑取消
const handleEditDel = (index) => {
  tableData.value[index] = {...currentItem.value}
  tableData.value[index].edit = false
}

const handleEditSave = async (index) => {
  try {
    var items = tableData.value[index]
    items.chuanYuanId = cid.value
    items.chuanYuanName = cname.value
    await useSaveUpdateChuanYuanKuFuJianApi(items)
    useMessage().success("修改成功")
    tableData.value[index].edit = false
    currentItem.value = {}
  }catch (e) {
    useMessage().error(e.msg)
  }
}

const handleSave = async (index) => {
  try {
    var items = tableData.value[index]
    items.id = ''
    items.chuanYuanId = cid.value
    items.chuanYuanName = cname.value
    const res = await useSaveUpdateChuanYuanKuFuJianApi(items)
    useMessage().success("保存成功")
    tableData.value[index].id = res.data.id
    tableData.value[index].edit = false
    currentItem.value = {}
  }catch (e) {
    useMessage().error(e.msg)
  }
}

const handleAdd = ()=>{
  addLoading.value = true
  const currentDate = new Date();
  const formattedTime = currentDate.toISOString().split('T')[0]
  tableData.value.unshift({qianFaRiQi: formattedTime,zhuangTai:1})
  addLoading.value = false
}

defineExpose({
  handleLoadData
})
</script>
